<template>
	<view>
		<uni-card>
			<template v-slot:title>
				<view class="card-top">
					<text class="title">店铺信息</text>
					<text class="edit-btn" @click="storeEdit" v-if="!store_modify">编辑</text>
					<view v-if="store_modify">
						<text class="exit-btn" @click="storeExit">退出</text>
						<text class="update-btn" @click="storeUpdate">保存</text>
					</view>
				</view>
			</template>
			<view class="store-detail">
				<view class="item-list">
					<text>店铺图标</text>
					<image class="img" :src="storeInfo.logo==''?'../../static/default_img.png':storeInfo.logo">
					</image>
				</view>
				<view class="item-list">
					<text class="item-left">店铺名称</text>
					<text class="item-right" v-if="!store_modify">{{storeInfo.name}}</text>
					<uni-easyinput class="item-input" placeholder="请输入店铺名称" v-model="storeInfoEdit.name"
						v-if="store_modify"></uni-easyinput>
				</view>
				<view class="item-list">
					<text class="item-left">店铺地址</text>
					<text class="item-right" v-if="!store_modify">{{storeInfo.address}}</text>
					<uni-easyinput class="item-input" placeholder="请输入店铺地址" v-model="storeInfoEdit.address"
						v-if="store_modify"></uni-easyinput>
				</view>
				<view class="item-list">
					<text class="item-left">联系电话</text>
					<text class="item-right" v-if="!store_modify">{{storeInfo.tel}}</text>
					<uni-easyinput class="item-input" placeholder="请输入联系电话" v-model="storeInfoEdit.tel"
						v-if="store_modify" type="number"></uni-easyinput>
				</view>
				<view class="item-list-last">
					<text class="item-left">店铺标签</text>
					<view class="store-tags" v-if="!store_modify">
						<text class="item-right store-tag" v-if="storeInfo.bread_type">烘焙</text>
						<text class="item-right store-tag" v-if="storeInfo.drink_type">饮品</text>
						<text class="item-right store-tag" v-if="storeInfo.meal_type">简餐</text>
					</view>
					<view class="item-right" v-if="store_modify">
						<uni-data-checkbox multiple class="tag-checkbox" v-model="tag_value" :localdata="tag"
							@change="tagChange" mode="tag"></uni-data-checkbox>
					</view>
				</view>
			</view>
		</uni-card>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeInfo: '',
				storeInfoEdit: '',
				store_modify: false,
				tag_value: '',
				tag: [{
					"value": "bread",
					"text": "烘焙"
				}, {
					"value": "drink",
					"text": "饮品"
				}, {
					"value": "meal",
					"text": "简餐"
				}],
			}
		},
		onLoad() {
			this.merchantId = uni.getStorageSync('merchantId');
			uniCloud.callFunction({
					name: 'getStore',
					data: {
						"merchant_id": this.merchantId,
					}
				})
				.then(res => {
					this.storeInfo = res.result.data[0];
					uni.setStorageSync('storeId', res.result.data[0]._id);
				});
		},
		methods: {
			getStoreData() {
				uniCloud.callFunction({
						name: 'getStore',
						data: {
							"merchant_id": this.merchantId,
						}
					})
					.then(res => {
						this.storeInfo = res.result.data[0];
					});
			},
			storeEdit() {
				this.store_modify = true;
				//深拷贝
				this.storeInfoEdit = JSON.parse(JSON.stringify(this.storeInfo));
				let item = this.storeInfoEdit;
				this.tag_value = [item.bread_type ? "bread" : "", item.drink_type ? "drink" : "", item.meal_type ? "meal" :
					""
				];
			},
			tagChange(e) {
				this.tag_value = e.detail.value;
			},
			storeExit() {
				this.store_modify = false;
			},
			storeUpdate() {
				let item = this.storeInfoEdit;
				uniCloud.callFunction({
						name: 'updateStore',
						data: {
							"_id": item._id,
							"tel": item.tel,
							"logo": item.logo,
							"name": item.name,
							"address": item.address,
							"bread_type": this.tag_value.includes("bread") ? true : false,
							"drink_type": this.tag_value.includes("drink") ? true : false,
							"meal_type": this.tag_value.includes("meal") ? true : false,
						}
					})
					.then(res => {
						this.storeInfo = JSON.parse(JSON.stringify(this.storeInfoEdit));
						if (res.result.updated == 1) {
							uni.showToast({
								title: "保存成功",
								icon: 'none'
							});
							this.store_modify = false;
							this.getStoreData();
						} else {
							uni.showToast({
								title: "保存失败，请重试",
								icon: 'none'
							});
						}

					});
			},
		}
	}
</script>

<style>
	.edit-btn {
		color: gray;
		font-size: 30rpx;
	}

	.update-btn {
		color: #2979ff;
		font-size: 30rpx;
	}

	.exit-btn {
		color: #2979ff;
		font-size: 30rpx;
		margin-right: 20rpx;
	}

	.img {
		width: 90rpx;
		height: 90rpx;
	}

	.card-top {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		padding: 30rpx 20rpx 10rpx 20rpx;
	}

	.title {
		font-size: 35rpx;
		font-weight: bold;
	}

	.store-detail {
		font-size: 30rpx;
		color: black;
		display: flex;
		flex-direction: column;
		padding-top: 10rpx;
		border-top: 1px solid #bfbfbf;
	}

	.item-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		border-bottom: 0.5px solid #dfdfdf;
	}

	.item-list-last {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
	}

	.item-index {
		font-weight: bold;
	}

	.item-left {
		flex: 3;
	}

	.item-right {
		flex: 7;
		word-break: break-all;
		display: flex;
		justify-content: flex-end;
	}

	.item-input {
		flex: 7;
	}

	.store-tags {
		display: flex;
		flex-direction: row;
	}

	.store-tag {
		margin-left: 10rpx;
	}

	.tag-checkbox {
		display: flex;
		flex-direction: row;
	}
	
</style>